<template>
  <div class="lsf">

    <div v-if="loading" class="skeleton-container" style="margin-top: 20rem;">
      <van-skeleton title avatar />
      <van-skeleton title :row="20" />
    </div>
    <div v-else>
      <div class="bg"></div>
      <div class="lsftop">
        <div class="lsfleft">
          <van-icon name="arrow-left" size="16" @click="goBack"/>
        </div>
        <div class="lsfcenter">评价</div>
        <div class="lsfright">
          <img
            src="https://mall.leyifan.com/static/h5/new_images/store_collection_active.png"
            alt=""
          />
          <img
            style="margin-left: 20rem"
            src="https://mall.leyifan.com/static/h5/new_images/store_translate.png"
            alt=""
          />
        </div>
      </div>
      <div class="pinglun_title" style="font-size: 12rem; text-align: center; padding: 14rem 0">
        <span>用户评价</span>
        <span>(),</span>
        <span>只显示最新</span>
        <span>100</span>
        <span>条</span>
      </div>
      <ul style="padding: 0 14rem 14rem 14rem">
        <li v-for="(review, index) in reviewsData" :key="index" style="margin-bottom: 14rem">
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex">
              <img
                v-if="review.photoUrl"
                :src="review.photoUrl"
                alt="User Photo"
                style="border-radius: 50%; width: 38rem; height: 38rem"
              />
              <div style="margin-left: 8rem">
                <p
                  style="
                    font-size: 14rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 150rem;
                  "
                >
                  {{ review.userName }}
                </p>
                <span
                  style="
                    font-size: 11rem;
                    background-color: rgba(255, 61, 88, 0.1);
                    color: rgb(255, 61, 88);
                    height: 19rem;
                    line-height: 19rem;
                    border-radius: 6rem;
                    padding: 3rem 6rem;
                  "
                  >卖出</span
                >
              </div>
            </div>
            <div style="font-size: 12rem; color: #999">{{ review.created }}</div>
          </div>
          <p
            style="
              padding: 14rem 10rem;
              margin-top: 6rem;
              background-color: #f5f5f5;
              font-size: 12rem;
              color: #999;
              border-radius: 10rem;
            "
          >
            {{ review.message }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { ref, type Ref } from 'vue'
import axios from '@/api/axios'
import router from '@/router'

let reviewsData: Ref<any[]> = ref([])
let loading = ref(true)

const goBack = () => {
  router.go(-1)
}


axios
  .get(
    `https://api.mall.leyifan.com/api/front/products/mercari/userInfo?userId=617189544&status=on_sale&pageId=`
  )
  .then((res: any) => {
    console.log('longwei', res.data.data.reviews)

    // 处理评论数据
    if (res.data.data.reviews && Array.isArray(res.data.data.reviews)) {
      reviewsData.value = res.data.data.reviews.map((review: any) => {
        const message = review.message || ''
        const userName = review.user?.name || ''
        const created = new Date(review.created * 1000).toLocaleString()
        const photoThumbnailUrl = review.user?.photoThumbnailUrl || ''
        const processedPhotoUrl = photoThumbnailUrl.replace(
          'https://static.mercdn.net/',
          'https://image1.leyifan.cn/mercari-cdn/'
        )
        return {
          message,
          userName,
          created,
          photoUrl: processedPhotoUrl,
        }
      })
    }
  })
  .finally(() => {
    loading.value = false
  })
</script>
  
  <style scoped lang="less">
.lsf {
  position: relative;
  .bg {
    position: absolute;
    width: 100vw;
    height: 82rem;
    background-image: url('https://mall.leyifan.com/static/h5/new_images/common_bg.png');
    background-size: cover;
    z-index: -1;
  }
  .lsftop {
    padding: 0 14rem;
    height: 42rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lsfcenter {
    margin-left: 40rem;
    font-weight: 600;
    font-size: 16rem;
  }
  .lsfright {
    height: 22rem;
    img {
      width: 22rem;
    }
  }
}
</style>